<template>
  <div class="dashboard-container">
    <!-- 内容区域 -->
    <el-card>
      <!-- 筛选区域 -->
      <div class="filter-view">
        <el-form inline label-width="100px">
          <!-- 单选框组合  筛选商品状态  0全部 1下架 -->
          <el-form-item label="商品状态： ">
            <el-radio-group v-model="status" size="small" @input="getTableData">
              <el-radio-button :label="0">全部</el-radio-button>
              <el-radio-button :label="1">下架</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <!-- 操作区域  -->
      <div class="action-view mb20">
        <el-button style="float: right;" icon="el-icon-plus" type="primary" size="small" @click="$router.push('/addGoods')">增加</el-button>
      </div>
      <!-- 表格区域 -->
      <div class="table-view mb20">
        <el-table :data="tableData">
          <el-table-column label="商品编号" prop="goodsId" />
          <el-table-column label="商品名" prop="goodsName" />
          <el-table-column label="商品简介" prop="goodsIntro" />
          <el-table-column label="商品图片" prop="goodsCoverImg">
            <template slot-scope="{ row }">
              <el-image class="goodsCover" :src="row.goodsCoverImg" :preview-src-list="[row.goodsCoverImg]" />
            </template>
          </el-table-column>
          <el-table-column label="商品库存" prop="stockNum" />
          <el-table-column label="商品售价" prop="sellingPrice" />
          <el-table-column label="上架状态" prop="goodsSellStatus">
            <template slot-scope="{ row }">
              <el-tag v-if="row.goodsSellStatus === 0" type="success">上架</el-tag>
              <el-tag v-else type="danger">下架</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button type="text" @click="$router.push({ path: '/addGoods', query: { id: row.goodsId } })">修改</el-button>
              <!-- 商品上架 则操作下架  反之 -->
              <el-button type="text" @click="updateStates(row.goodsId, row.goodsSellStatus)">{{ row.goodsSellStatus === 0 ? '下架' : '上架' }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页区域 默认分页10条一页-->
      <div class="page-view fc">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="pagable.total"
          :current-page="pagable.page"
          @current-change="pageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Goods',
  data() {
    return {
      // 表格数据
      tableData: [],
      // 分页配置
      pagable: {
        page: 1,
        total: 0
      },
      // 商品筛选状态
      status: 0
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    // 获取数据
    async getTableData() {
      const { page } = this.pagable
      // 1. 发起请求  pageNumber 页码  pageSize 每页条数 goodsSellStatus 上架状态
      const params = { pageNumber: page, pageSize: 10, goodsSellStatus: this.status }
      const { data } = await this.$http.get('/goods/list', { params })
      console.log(data)
      // 2. 将请求结果渲染到页面中
      this.tableData = data.list
      this.pagable.total = data.totalCount
    },
    // 页码更改
    pageChange(page) {
      // 更改data中的页码
      this.pagable.page = page
      // 获取数据
      this.getTableData()
    },
    // 上下架商品
    async updateStates(id, status) {
      // status   0   ->  1
      //          1   ->  0
      // 发起请求
      await this.$http.put(`/goods/status/${status ? 0 : 1}`, { ids: [id] })
      this.$message.success('操作成功')
      // 刷新列表
      this.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
.action-view {
  overflow: hidden;
}
.goodsCover {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}
</style>
